<script setup lang="ts">
	import { reactive, ref, onUnmounted } from 'vue'
	import { onShow } from '@dcloudio/uni-app'
	import { outStock, inStock } from '@/api/home/index'

	const towIndex = ref(1)
	const range = ref([])


	const useTabs = () => {
		const tabsColumns = reactive([
			{
				name: '出库明细',
				id: 1
			},
			{
				name: '入库明细',
				id: 2
			}
		])

		return {
			tabsColumns
		}
	}
	const { tabsColumns } = useTabs()


	const paging = ref()
	const dataList = ref([])
	let currentListQuery = outStock; // 默认使用入库接口
	const useCURD = () => {
		const query = ref({
			start_time: '',
			end_time: ''
		})

		const getList = async (page, limit) => {
			const params = { page, limit, ...query.value }
			try {
				const res = await currentListQuery(params)
				paging.value?.complete([...res.data.data])
			} catch (err) {
				paging.value?.complete(false)
			}
		}

		const searchAction = () => {
			paging.value?.reload()
		}

		return {
			getList,
			searchAction,
			query
		}
	}
	const { getList, searchAction, query } = useCURD()

	// tabs 切换
	const click = (index) => {
		towIndex.value = index.id
		currentListQuery = index.id === 1 ? outStock : inStock; // 根据点击的索引选择接口
		paging.value?.reload()
		query.value.start_time = ''
		query.value.end_time = ''
		range.value = []

	}
	// 时间
	const maskChange = (e) => {
		if (e.length == 0) {
			query.value.start_time = ''
			query.value.end_time = ''
			range.value = []
			paging.value?.reload()
		} else {
			query.value.start_time = e[0]
			query.value.end_time = e[1]
			paging.value?.reload()
		}

	}
</script>

<template>
	<z-paging ref="paging" v-model="dataList" @query="getList" bg-color="rgba(242, 243, 245, 1)">
		<template #top>
			<view class="user_info_wrap">
				<view>
					<uni-datetime-picker style="background-color: #f2f2f2;" v-model="range" type="daterange"
						@change="maskChange" />
				</view>
				<view class="user-info">
					<view class="avatar-wrap">
						<up-tabs :list="tabsColumns" :activeStyle="{ color: 'rgba(54, 116, 242, 1)' }"
							:itemStyle="{ height: '104rpx', fontSize: '28rpx' }" lineWidth="104rpx"
							lineColor=" rgba(54, 116, 242, 1)" :scrollable="false" @click="click">
						</up-tabs>
					</view>
				</view>
			</view>
		</template>
		<view class="main1">
			<view class="main-trith">
				<view class="list">
					<up-row justify="space-between" gutter="10">
						<up-col span="9">
							<up-text text="商品名称" bold></up-text>
						</up-col>
						<up-col span="3">
							<up-text :text="towIndex == 1 ? '出库数量': '入库数量'" bold></up-text>
						</up-col>
						<!-- <up-col span="4">
							<up-text text="时间" bold></up-text>
						</up-col> -->
					</up-row>
					<view style="width: 702rpx;height: 2rpx;background: rgba(0, 0, 0, 0.1);margin: 20rpx auto;">
					</view>
					<block v-for="(item,index) in dataList" :key="index">
						<up-row justify="space-between" gutter="10">
							<up-col span="9">
								<up-text :text="item.name" align="left"></up-text>
							</up-col>
							<up-col span="3">
								<up-text :text="item.num" align="left"></up-text>
							</up-col>
							<!-- <up-col span="4">
								<up-text :text="item.create_time" align="left"></up-text>
							</up-col> -->
						</up-row>
						<view style="width: 702rpx;height: 2rpx;margin: 10rpx auto;">
						</view>
					</block>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<style scoped lang="scss">
	.user_info_wrap {
		@include flex();
		flex-direction: column;
		justify-content: flex-end;
		gap: 20rpx;
		width: 100%;
		height: 209rpx;
		background-color: #FFFFFF;
		padding: 0 40rpx 0rpx;
		box-sizing: border-box;
	}

	.main1 {
		width: 100%;
		margin-top: 30rpx;

		.main-trith {
			width: 100%;
			// height: 90vh;
			background: rgba(255, 255, 255, 1);
			padding: 30rpx;
			box-sizing: border-box;

			.list {
				display: flex;
				flex-direction: column;
				gap: 20rpx;
				margin: 20rpx 0rpx;
			}
		}
	}
</style>